<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>	
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猫眼</title>
<link href="${pageContext.request.contextPath}/css/maoyan.css" type="text/css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/css/seat.css" type="text/css" rel="stylesheet">
<link href="../../../../font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="${pageContext.request.contextPath}/js/layer-v3.0.3/layer/mobile/need/layer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/phone.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/layer-v3.0.3/layer/mobile/layer.js"></script>
<style >

</style>
</head>
<body>
	<div class="header">
		<div class="header-inner">
			<a href="/" class="logo" data-act="icon-click"></a>
			<div class="city-container" data-val="{currentcityid:59 }">
				<div class="city-selected">
					<div class="city-name">
						成都 <span class="caret"></span>
					</div>
				</div>
				<div class="city-list" data-val="{ localcityid: 59 }">
					<div class="city-list-header">
						定位城市： <a class="js-geo-city">成都</a>
					</div>

				</div>
			</div>


			<div class="nav">
				<ul class="navbar">
					<li><a href="/" data-act="home-click" class="active">首页</a>
					</li>
					<li><a href="/films" data-act="movies-click">电影</a></li>
					<li><a href="/cinemas" data-act="cinemas-click">影院</a></li>
					<li><a href="/board" data-act="board-click">榜单</a></li>
				</ul>
			</div>

			<div class="user-info">
				<div class="user-avatar J-login">
					<img
						src="https://p0.meituan.net/movie/7dd82a16316ab32c8359debdb04396ef2897.png">
					<span class="caret"></span>
					<ul class="user-menu">
						<li><a href="javascript:void 0">登录</a></li>
					</ul>
				</div>
			</div>

			<form action="/query" target="_blank" class="search-form"
				data-actform="search-click">
				<input name="kw" class="search" type="search" maxlength="32"
					placeholder="找影视剧、影人、影院" autocomplete="off"> <input
					class="submit" type="submit" value="">
			</form>
		</div>
	</div>
	<div class="header-placeholder"></div>
	
	<!-- 第二部分 -->
	<div class="container" id="app">
		<div class="order-progress-bar">
			<div class="step first done">
				<span class="step-num">1</span>
				<div class="bar"></div>
				<span class="step-text">选择影片场次</span>
			</div>
			<div class="step done">
				<span class="step-num">2</span>
				<div class="bar"></div>
				<span class="step-text">选择座位</span>
			</div>
			<div class="step ">
				<span class="step-num">3</span>
				<div class="bar"></div>
				<span class="step-text">14分钟内付款</span>
			</div>
			<div class="step last ">
				<span class="step-num">4</span>
				<div class="bar"></div>
				<span class="step-text">影院取票观影</span>
			</div>
		</div>

		<!-- 选择座位 -->
		<div class="main clearfix">
			<div class="hall">
				<div class="seat_show">
					<ul>
			        	<li>
			            	<i></i>
			                <span >可选</span>
			            </li>
			            <li>
			            	<i></i>
			                <span>已售</span>
			            </li>
			            <li>
			            	<i></i>
			                <span>已选</span>
			            </li>
			        </ul>
				</div>


				<div class="seats-block" data-cols="16" data-section-id="1"
					data-section-name="全区" data-seq-no="201907030134200">

					<div class="row-id-container">
						<span class="row-id">1</span> <span class="row-id">2</span> <span
							class="row-id">3</span> <span class="row-id">4</span> <span
							class="row-id">5</span> <span class="empty-row-id"></span> <span
							class="row-id">6</span> <span class="row-id">7</span> <span
							class="row-id">8</span> <span class="row-id">9</span> <span
							class="row-id">10</span> 
					</div>
					<!-- 座位区域 -->	
					<div class="seat_choose">
						<div class="number" id="num"></div>
						<div class="seats" id="seats"></div>
					</div>									
				</div>
			</div>
		<!-- 电影信息 -->
			<div class="side">
			<div class="movie-info clearfix">
				<div class="poster">
					<img
						src="https://p0.meituan.net/movie/30b20139e68c46d02e0893277d633b701292458.jpg@115w_158h_1e_1c">
				</div>
				<div class="content">
					<p class="name text-ellipsis">千与千寻</p>
					<div class="info-item">
						<span>类型 :</span> <span class="value">动画,冒险,奇幻,家庭</span>
					</div>
					<div class="info-item">
						<span>时长 :</span> <span class="value">125分钟</span>
					</div>
				</div>
			</div>
			<!-- 电影信息 -->
			<div class="show-info">
				<div class="info-item">
					<span>影院 :</span> <span class="value text-ellipsis">太平洋影城（北欧知识城店）</span>
				</div>
				<div class="info-item">
					<span>影厅 :</span> <span class="value text-ellipsis">5号厅</span>
				</div>
				<div class="info-item">
					<span>版本 :</span> <span class="value text-ellipsis">原版2D</span>
				</div>
				<div class="info-item">
					<span>场次 :</span> <span class="value text-ellipsis screen">今天
						7月3 10:10</span>
				</div>
				<div class="info-item">
					<span>票价 :</span> <span class="value text-ellipsis">￥25/张</span>
				</div>
			</div>

			<div class="ticket-info">
				<div class="no-ticket">
					<p class="buy-limit">座位：一次最多选5个座位</p>
					<p class="no-selected">
						请<span>点击左侧</span>座位图选择座位
					</p>
				</div>
				<div class="has-ticket" style="display: none">
					<span class="text">座位：</span>
					<div class="ticket-container" data-limit="5"></div>
				</div>

				<div class="total-price">
					<span>总价 :</span> <span class="price">0</span>
				</div>
			</div>

			<div class="confirm-order">
				</div>
				    <!-- String MovieName, String CinemaName, String HallName, String Version,String Time,String Price,String TotalPrice -->
				    <form action="/buy" method="post">
				    	<input type="hidden" name="MovieName" value="${requestScope.film.filmName}" />
						<input type="hidden" name="CinemaName" value="${requestScope.cinema.cinemaName}" />
						<input type="hidden" name="HallName" value="1厅" />
						<input type="hidden" name="Version" value="原版3D" />
						<input type="hidden" name="Time" value="2019/7/5" />
						<input type="hidden" name="Price" value="30" />
						<input type="hidden" name="TotalPrice" value="60" />
				   		<input type="submit" class="buttons" value="确认选座"/>
				     </form>                                                            
				</div>
			</div>
			</div>
		</div>
	</div>
<script>
$(function(){
	var html='';
		html+='<ul class="touchs" id="touchs"><div class="screen1">大厅屏幕</div>';
		for(var i=1; i<=100; i++){
			var selected = (i>43&&i<47 ? 'selected' : '');
			html+='<li class="'+selected+'">';
			html+='<input type="checkbox" name="seat-'+i+'" id="seat-'+i+'" />';
			html+='<label for="seat-'+i+'"></label>';
			html+='</li>';
		}
		html+='</ul>';
		$('#seats').html(html);
		
	
	$('.selected').children('input').attr({'disabled':'disabled','checked':'checked'});
	
		
	$('.seats li input').on('click',function(){
		var checklen = $('.seats li').not('.selected').children('input:checked').length;
		console.log(checklen);
		if(checklen>2){
			popu('最多只能选择两个座位');
			return false;
		}
	});
	
	
	//公用弹出层
	function popu(content){
		layer.open({
			content: content
			,skin: 'msg'
			,time: 3
		});	
	}
})
</script>

<!---拖拽js--->
<script>
$(function(){
    var flag = false;
    var cur = {
        x:0,
        y:0
    }
    var nx,ny,dx,dy,x,y ;
    function down(){
        flag = true;
        var touch ;
        if(event.touches){
            touch = event.touches[0];
        }else {
            touch = event;
        }
        cur.x = touch.clientX;
        cur.y = touch.clientY;
        dx = div2.offsetLeft;
        dy = div2.offsetTop;
    }
    function move(){
        if(flag){
            var touch ;
            if(event.touches){
                touch = event.touches[0];
            }else {
                touch = event;
            }
            nx = touch.clientX - cur.x;
            ny = touch.clientY - cur.y;
            x = dx+nx;
            y = dy+ny;
            div2.style.left = x+"px";
            //div2.style.top = y +"px";

			
            //阻止页面的滑动默认事件
            document.addEventListener("touchmove",function(){
                //event.preventDefault();
            },false);
        }
    }
    //鼠标释放时候的函数
    function end(){
        flag = false;
    }
    var div2 = document.getElementById("touchs");
    div2.addEventListener("mousedown",function(){
        down();
    },false);
    div2.addEventListener("touchstart",function(){
        down();
    },false)
    div2.addEventListener("mousemove",function(){
        move();
    },false);
    div2.addEventListener("touchmove",function(){
        move();
    },false)
    document.body.addEventListener("mouseup",function(){
        end();
    },false);
    div2.addEventListener("touchend",function(){
        end();
    },false);
	
});
</script>
</body>
</html>